{% extends "base/base.html" %}

{% block title %}主页 - 项目合作归属数据管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2><i class="bi bi-speedometer2"></i> 系统主页</h2>
        <p class="text-muted">项目合作归属数据管理系统 - 数据概览与统计分析</p>
    </div>
</div>

<!-- 统计卡片 -->
<div class="row mb-4">
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>{{ total_customers }}</h4>
                        <p class="mb-0">总客户数</p>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-people-fill" style="font-size: 2rem;"></i>
                    </div>
                </div>
            </div>
            <div class="card-footer bg-primary-dark">
                <small>今年新增: {{ current_year_customers }}</small>
            </div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card bg-success text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>{{ total_staff }}</h4>
                        <p class="mb-0">项目负责人总数</p>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-person-badge-fill" style="font-size: 2rem;"></i>
                    </div>
                </div>
            </div>
            <div class="card-footer bg-success-dark">
                <small>今年新增: {{ current_year_staff }}</small>
            </div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card bg-info text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>{{ online_negotiations }}</h4>
                        <p class="mb-0">今年线上商谈次数</p>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-laptop-fill" style="font-size: 2rem;"></i>
                    </div>
                </div>
            </div>
            <div class="card-footer bg-info-dark">
                <small>累计线上商谈</small>
            </div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card bg-warning text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>{{ offline_negotiations }}</h4>
                        <p class="mb-0">今年线下商谈次数</p>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-building-fill" style="font-size: 2rem;"></i>
                    </div>
                </div>
            </div>
            <div class="card-footer bg-warning-dark">
                <small>累计线下商谈</small>
            </div>
        </div>
    </div>
</div>

<!-- 图表区域 -->
<div class="row">
    <!-- 客户总量变化 -->
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-graph-up"></i> 客户总量年度变化
                </h5>
            </div>
            <div class="card-body">
                <canvas id="customerChart" style="height: 300px;"></canvas>
            </div>
        </div>
    </div>
    
    <!-- 线上商谈变化 -->
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-laptop"></i> 线上商谈年度变化
                </h5>
            </div>
            <div class="card-body">
                <canvas id="onlineChart" style="height: 300px;"></canvas>
            </div>
        </div>
    </div>
    
    <!-- 线下商谈变化 -->
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-building"></i> 线下商谈年度变化
                </h5>
            </div>
            <div class="card-body">
                <canvas id="offlineChart" style="height: 300px;"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- 快捷操作 -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-lightning-fill"></i> 快捷操作
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                        <a href="{{ url_for('customer.customer_management') }}" class="btn btn-outline-primary w-100">
                            <i class="bi bi-people"></i><br>客户管理
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                        <a href="{{ url_for('staff.staff_management') }}" class="btn btn-outline-success w-100">
                            <i class="bi bi-person-badge"></i><br>人员管理
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                        <a href="{{ url_for('negotiation.negotiation_list') }}" class="btn btn-outline-info w-100">
                            <i class="bi bi-chat-dots"></i><br>商谈记录
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                        <a href="{{ url_for('statistics.stats_by_staff') }}" class="btn btn-outline-warning w-100">
                            <i class="bi bi-graph-up"></i><br>统计分析
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                        <a href="{{ url_for('reports.report_generation') }}" class="btn btn-outline-danger w-100">
                            <i class="bi bi-file-earmark-text"></i><br>报表生成
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                        <a href="{{ url_for('attendance.attendance_management') }}" class="btn btn-outline-secondary w-100">
                            <i class="bi bi-clock"></i><br>考勤管理
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 检查Chart.js是否加载
    if (typeof Chart === 'undefined') {
        console.error('Chart.js未正确加载');
        return;
    }
    
    // 渲染图表
    const customerChartData = {{ charts_data.customer_chart|tojson }};
    const onlineChartData = {{ charts_data.online_chart|tojson }};
    const offlineChartData = {{ charts_data.offline_chart|tojson }};
    
    // 检查数据是否存在
    console.log('图表数据:', {
        customerChartData: customerChartData,
        onlineChartData: onlineChartData,
        offlineChartData: offlineChartData
    });
    
    if (!customerChartData || !onlineChartData || !offlineChartData) {
        console.error('图表数据缺失');
        // 对于canvas元素，我们创建简单的文本提示
        const canvases = ['customerChart', 'onlineChart', 'offlineChart'];
        canvases.forEach(canvasId => {
            const canvas = document.getElementById(canvasId);
            const ctx = canvas.getContext('2d');
            ctx.font = '16px Arial';
            ctx.fillStyle = '#6c757d';
            ctx.textAlign = 'center';
            ctx.fillText('暂无数据', canvas.width / 2, canvas.height / 2);
        });
        return;
    }
    
    // 客户数量图表
    const ctx1 = document.getElementById('customerChart').getContext('2d');
    new Chart(ctx1, {
        type: 'line',
        data: {
            labels: customerChartData.labels,
            datasets: [{
                label: '客户数量',
                data: customerChartData.data,
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: customerChartData.title
                },
                legend: {
                    display: true,
                    position: 'top'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: '数量'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: '月份'
                    }
                }
            }
        }
    });
    
    // 线上商谈图表
    const ctx2 = document.getElementById('onlineChart').getContext('2d');
    new Chart(ctx2, {
        type: 'line',
        data: {
            labels: onlineChartData.labels,
            datasets: [{
                label: '线上商谈次数',
                data: onlineChartData.data,
                borderColor: 'rgb(54, 162, 235)',
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: onlineChartData.title
                },
                legend: {
                    display: true,
                    position: 'top'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: '次数'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: '月份'
                    }
                }
            }
        }
    });
    
    // 线下商谈图表
    const ctx3 = document.getElementById('offlineChart').getContext('2d');
    new Chart(ctx3, {
        type: 'line',
        data: {
            labels: offlineChartData.labels,
            datasets: [{
                label: '线下商谈次数',
                data: offlineChartData.data,
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: offlineChartData.title
                },
                legend: {
                    display: true,
                    position: 'top'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: '次数'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: '月份'
                    }
                }
            }
        }
    });
});
</script>
{% endblock %}
